<template>
  <!-- hpv疫苗模块 -->
  <view class="nav-image">
    <image
      src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg"
      mode="aspectFill"
    ></image>
  </view>
  <view class="nav-title">
    <view
      v-for="(item, index) in hpv_select"
      :key="index"
      @click="select(item._id, index)"
    >
      {{ item.name }}
    </view>
  </view>
  <view class="hpv-list" v-for="item in hpv_list" :key="item._id">
    <view class="left">
      <view class="vccName">{{ item.name }}</view>
      <view class="vccInfo" v-if="item.describe">
        <text class="title-block">{{ item.describe[0] }}</text>
        <text class="title-block">{{ item.describe[1] }}</text>
      </view>
      <view v-if="item.price" class="price">
        ￥{{ item.price[0] }}~￥{{ item.price[1] }}
      </view>
    </view>
    <view class="right" @click="ToDetail(item._id,item.name)">
      <view class="order">去预约</view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import apiRequest from "~/api/index";
import skIndex from '~/Skeleton/SK-hpvlist.vue'
// hpv疫苗数据
const hpv_list = ref([]);
// 筛选数据
const hpv_select = ref([]);
// 全部筛选数据
const hpv_all = ref([]);
// 骨架屏
let skeLeton = ref(true)
onMounted(async () => {
  const res = await apiRequest.OtuHpv();
  hpv_list.value = res.data[0].hpv_list;
  hpv_select.value = res.data[0].hpv_select;
  hpv_all.value = res.data[0].hpv_list;
  // 去除骨架屏
  skeLeton.value = false
});

// 筛选功能
const select = (id, index) => {
  let hpv_select_after = hpv_all.value.filter((item) => item.hpv_id == id);
  if (index == 0) {
    // 全部
    hpv_list.value = hpv_all.value;
  } else {
    hpv_list.value = hpv_select_after;
  }
};

const ToDetail = (id,name) => {
  uni.navigateTo({
    url:`/pages/hpv-vaccine/hpv-buy?id=${id}&name=${name}`
  })
};
</script>

<style scoped>
.nav-image image {
  width: 100%;
  height: 350rpx;
}
.nav-title {
  @apply flex bg-light-50;
  padding: 0 40rpx;
  height: 100rpx;
  align-items: center;
  justify-content: space-between;
}
.hpv-list {
  padding: 20rpx;
  margin: 0 20rpx;
  @apply bg-light-50 flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.title-block {
  display: inline-block;
  padding: 2px;
  @apply bg-gray-100;
  border-radius: 10rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}
.hpv-list .vccName {
  font-size: 38rpx;
}
.hpv-list .price {
  @apply font-bold text-red-400;
}
.right {
  @apply flex flex-col;
  justify-content: flex-end;
}
.right .order {
  padding: 15rpx 30rpx;
  @apply bg-blue-600 text-light-50;
  font-size: 26rpx;
  border-radius: 30rpx;
}
</style>
